<template>
  <div>
    <div class="container-list" v-if="data.total!=0">
      <div class="content-list-block">
        <div class="content-list-body">
          <div class="content-list" v-for="contlist in data.list">
            <div>
              <div class="pc-right-line">
                <div class="left-img" :style="{backgroundImage:'url(' + contlist.cover_path + ')'}"></div>
              </div>
              <div class="right-text">
                <div class="right-content-text">
                  {{contlist.content}}
                </div>
                <div class="content-info list-info">
                  {{contlist.author}} {{contlist.publish_time}}
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div class="see-more-btn" v-if="data.total>= 10">
            <span @click="moreList">查看更多</span>
          </div>
        </div>
      </div>
    </div>
    <div class="no-content" v-else>
      <div class="nosearch">
        <img src="../../img/mobile/no_search.png" alt="">
      </div>
      本次搜索内容为空！
    </div>
  </div>
</template>
<script>
  import api from '../../utils/api'
  import apiConfig from '../../utils/apiconfig.js'
  import helper from '../../utils/helper'
  import loading from '../../components/loading'
  export default {
    data () {
      return {
        data: {
          total: 1,
          list: [{
            id: 1,
            first_level_cid: 3,
            second_level_cid: 22,
            title: '南方大部雨水笼罩 气温下降天阴凉',
            author: 'IFF小编',
            source: 'IFF第二次会议',
            type: 0,
            note: '',
            content: '中国国天气网讯 今明天（2-3日），南方大阿萨德浪费哈地方阿萨德开发了哈是否阿萨德看了房交会按时发空间部依然阴雨笼罩',
            views: 0,
            cover_path: '1.jpg',
            is_recommend: 0,
            publish_time: '2018-05-01'
          }]
        },
        page: 1,
        content: ''
      }
    },
    components: {
      loading
    },
    created () {
      this.content = this.$route.query.content
      this.getDatalist(this.content, this.page)
    },
    methods: {
      getDatalist (content, page) {
        var param = {
          key: content,
          page: page
        }
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.serachlist), this.params, res => {
          this.data = res
          this.loading = false
        }, res => {
          console.log(res)
        })
      },
      moreList () {
        var thispage = this.page + 1
        this.page = thispage
        this.getDatalist(this.content, thispage)
      }
    }
  }
</script>
<style>
  .learn-all{
    color: #4e6e6d;
    display: inline-block;
    float: right;
    margin-top: 7px;
    line-height: 23px;
  }
  .top-big-img{
    margin: 10px 0;
  }

  .top-content-intro{
    font-size: 16px;
    color: #2b2b2b;
    line-height: 1.6;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
  }

  .footer-tab{
    padding: 15px;
    font-size:14px;
    background: #2e2d33;
  }
  .footer-copyright{
    font-size: 12px;
    padding: 15px;
    line-height: 1.6;
  }

  .footer-content{
    background: #222126;
    color: #ffffff;
  }
  .content-list-body{padding: 5px 15px 15px 15px}
  .learn-all img{
    width: 7px;
    vertical-align: middle;
    margin-left: 5px;
  }
  .top-big-img img{
    width:100%;
  }
  .content-info{
    font-size: 13px;
    color: #4e6e6d;
    margin-top: 10px;
  }
  .content-info.list-info{
    margin-left: 80px;
  }
  .content-list{
    padding: 10px 0;
  }
  .footer-tab li.noline{
  border-right:none;
  }
  .footer-copyright div{
    text-align: center;
  }

  .see-more-btn{
    text-align: center;
  }
  .see-more-btn span{
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 25px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    color: #9b9b9b;
    border:1px solid #9b9b9b;
    margin: 20px 0;
  }
  .nosearch{
    margin: 40px 0 10px 0;
  }
</style>
